<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>登录</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<div layout:fragment="content" th:remove="tag">
    <header>
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">

                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a th:href="@{/}">Cola-Auth</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="col-md-12" id="loginPanel">
                <div class="text-center" style="padding: 50px;">
                    <img th:src="${user.headImg}" style="max-width: 200px;max-height: 200px;">
                    <h3 th:text="${user.nickname}"></h3>
                </div>

                <div class="alert alert-danger" th:if="${signup_error_message}">
                    <span th:text="${signup_error_message}"></span>
                </div>

                <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-justified" role="tablist">
                        <li role="presentation" class="active"><a href="#old" aria-controls="home" role="tab"
                                                                  data-toggle="tab">绑定已有账户</a></li>
                        <li role="presentation"><a href="#new" aria-controls="profile" role="tab" data-toggle="tab">注册并绑定</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" style="padding-top: 30px;">
                        <div role="tabpanel" class="tab-pane active" id="old">
                            <form id="signinForm" class="form-horizontal" method="post" action="/social/signup">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="signinUsername">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="signinUsername" class="form-control" name="username"
                                               placeholder="用户名"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="signinPassword" class="col-sm-2 control-label">密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" id="signinPassword" class="form-control" name="password"
                                               placeholder="密码"/>
                                    </div>
                                </div>
                                <div class="form-group ">
                                    <div class="col-md-12">
                                        <input type="hidden" th:name="${_csrf.parameterName}"
                                               th:value="${_csrf.token}"/>
                                        <input type="hidden" name="signupType" value="login">
                                        <input type="submit"
                                               name="login-submit"
                                               id="login-submit"
                                               class="form-control btn btn-primary"
                                               value="登录并绑定账户">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="new">
                            <form id="signupForm" class="form-horizontal" method="post" action="/social/signup">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="signupUsername">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="signupUsername" class="form-control" name="username" placeholder="用户名"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="signupPassword" class="col-sm-2 control-label">密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" id="signupPassword" class="form-control" name="password" placeholder="密码"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="confirmPassword" class="col-sm-2 control-label">确认密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" id="confirmPassword" class="form-control" name="confirmPassword" placeholder="确认密码"/>
                                    </div>
                                </div>
                                <div class="form-group ">
                                    <div class="col-md-12">
                                        <input type="hidden" th:name="${_csrf.parameterName}"
                                               th:value="${_csrf.token}"/>
                                        <input type="hidden" name="signupType" value="register"/>
                                        <input type="submit"
                                               name="login-submit"
                                               id="register-submit"
                                               class="form-control btn btn-primary"
                                               value="注册并绑定账户">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form id="loginForm" method="post" action="/login" class="hidden">
        <input type="hidden" id="username" name="username">
        <input type="hidden" id="password" name="password">
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
    </form>
    <script>
        $("#signinForm").submit(function(e){
            $.post("/social/signup", $(this).serialize(),function(){
                console.log("signup success");
                $("#username").val($("#signinUsername").val());
                $("#password").val($("#signinPassword").val());
                $("#loginForm").submit();
            });
            return false;
        });
        $("#signupForm").submit(function(){
            $.post("/social/signup", $(this).serialize(),function(){
                console.log("signup success");
                $("#username").val($("#signupUsername").val());
                $("#password").val($("#signupPassword").val());
                $("#loginForm").submit();
            });
            return false;
        });
    </script>
</div>
</body>
</html>
